<template>
  <div class="charts">
    <div class="charts-item">
      <FunnelChart :data="funnelData" />
    </div>
    <div class="charts-item">
      <template v-for="(item, key) in barDatas">
        <LineBar :data="item" :key="key" />
      </template>
    </div>
    <div class="charts-item">
      <template v-for="(item, key) in hbarDatas">
        <HorizontalChart :data="item" :key="key" />
      </template>
    </div>
    <div class="charts-item">
      <template v-for="(item, key) in pieDatas">
        <PieChart :data="item" :key="key" />
      </template>
    </div>
  </div>
</template>
<script>
import FunnelChart from "@/components/BasisComponents/FunnelChart.vue";
import LineBar from "@/components/BasisComponents/LineBar.vue";
import HorizontalChart from "@/components/BasisComponents/HorizontalChart.vue";
import PieChart from "@/components/BasisComponents/PieChart.vue";
export default {
  components: { FunnelChart, LineBar, HorizontalChart, PieChart },
  data() {
    return {
      funnelData: {
        bidsTotal: 683513,
        bidsName: "家次投标",
        outbidTotal: 13368,
        outbidName: "家中标",
      },
      barDatas: [
        {
          showType: "Line",
          type: "",
          typeName: "折线图",
          xName: "abc",
          xData: [0.1, 0.3, 0.4, 0.5, 0.7, 0.9, 1],
          yName: "y_abc",
          yData: [],
          series: [
            { data: [0.1, 0.2, 0.5, 0.5, 0.7, 0.8, 1], name: "ab", type: "line" },
            { data: [0.1, 0.4, 0.4, 0.5, 0.7, 0.9, 1], name: "abc", type: "line" },
            { data: [0.1, 0.2, 0.4, 0.7, 0.7, 0.9, 1], name: "abcd", type: "line" },
          ],
        },
        {
          showType: "Bar",
          type: "",
          typeName: "多柱状图",
          xName: "abc",
          xData: [0.1, 0.3, 0.4, 0.5, 0.7, 0.9, 1],
          yName: "y_abc",
          yData: [],
          series: [
            { data: [0.1, 0.2, 0.5, 0.5, 0.7, 0.8, 1], name: "ab", type: "bar" },
            { data: [0.1, 0.4, 0.4, 0.5, 0.7, 0.9, 1], name: "abc", type: "bar" },
            { data: [0.1, 0.2, 0.4, 0.7, 0.7, 0.9, 1], name: "abcd", type: "bar" },
          ],
        },
        {
          showType: "LineBar",
          type: "",
          typeName: "折柱图",
          xName: "abc",
          xData: [0.1, 0.3, 0.4, 0.5, 0.7, 0.9, 1],
          yName: "y_abc",
          yData: [],
          series: [
            { data: [0.1, 0.2, 0.5, 0.5, 0.7, 0.8, 1], name: "ab", type: "bar" },
            { data: [0.1, 0.4, 0.4, 0.5, 0.7, 0.9, 1], name: "abc", type: "bar" },
            { data: [0.1, 0.2, 0.4, 0.7, 0.7, 0.9, 1], name: "abcd", type: "line" },
          ],
        },
      ],
      hbarDatas: [
        {
          showType: "HorizontalChart",
          type: "",
          typeName: "横向柱状图",
          xName: "abc",
          xData: [],
          yName: "y_abc",
          yData: ["服务1", "服务2", "服务3", "服务4", "服务5", "服务6", "服务7", "服务8", "服务9"],
          series: [
            { data: [6, 5, 6, 5, 7, 8, 9, 10, 12], name: "运行成功次数", type: "bar" },
            { data: [0, 1, 1, 0, 2, 4, 5, 7, 8], name: "运行失败次数", type: "bar" },
          ],
        },
      ],
      pieDatas: [
        {
          showType: "PieChart",
          type: "",
          typeName: "饼图",
          xName: "",
          xData: [],
          yName: "",
          yData: [],
          series: [
            { value: 1048, name: "区域名称1", pt: "60.00", type: "pie" },
            { value: 735, name: "区域名称2", pt: "60.00", type: "pie" },
            { value: 580, name: "区域名称3", pt: "60.00", type: "pie" },
            { value: 484, name: "区域名称4", pt: "60.00", type: "pie" },
            { value: 300, name: "区域名称5", pt: "60.00", type: "pie" },
            { value: 890, name: "区域名称6", pt: "60.00", type: "pie" },
            { value: 484, name: "区域名称4", pt: "60.00", type: "pie" },
            { value: 300, name: "区域名称5", pt: "60.00", type: "pie" },
            { value: 890, name: "区域名称6", pt: "60.00", type: "pie" },
          ],
        },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less">
.charts {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  // grid-template-columns: repeat(3, 1fr);
  // grid-auto-rows: minmax(400px, auto);
  // gap: 10px;
  &-item {
    position: relative;
  }
}
</style>
